import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // vuex:作用：共享状态（共享数据）管理
  // state:存储共享数据
  // state访问：this.$store.state.num
  // mapState
  // 1:导入  import {mapState} from 'vuex'
  // 2:定义：  computed:{...mapState(['state属性名'])}
  // 3:使用  this.state属性名
  state: {
    num: 10
  },
  // mutations:用于修改state数据的唯一途径
  // 调用mutations方法 this.$store.commit('setNum',实参)
  // mutations有些公司习惯将它的方法名全大写
  // mapMutations
  // 1:导入  import {mapMutations} from 'vuex'
  // 2:定义：  methods:{...mapMutations(['mutations方法名'])}
  // 3:使用  this.mutations方法名（实参）
  mutations: {
    setNum (state, value) {
      state.num = value
    }
  },
  // actions:用于异步处理，它也可以做同步，但是他要修改state,还得通过mutations
  // 调用actions this.$store.dispatch('actions方法名',实参)
  // mapActions
  // 1:导入  import {mapActions} from 'vuex'
  // 2:定义：  methods:{...mapActions(['mutations方法名'])}
  // 3:使用  this.mapActions(实参)
  actions: {
    refreshNum ({ commit }) {
      // store:{commit,state}
      setTimeout(() => {
        commit('setNum', Date.now())
      }, 2000)
    }
  },
  // 计算属性
  // 使用场景：依赖一个或者多个值产生一个新的值
  // 特点：它的值会缓存，它依赖的值变化了，它会实时变化
  // getters就是vuex的计算属性，它依赖的是state数据
  // 定义： 方法名(state){return 新的值}
  // 访问：this.$store.getters.getNum
  // 了解：方法名(state,getters,rootState,rootGetters){return 新的值}
  // state:当前 的state等效于this.$store.state
  // getters:用于获取当前所有的getters等效于this.$store.getters
  getters: {
    getNum (state, getters) {
      return getters.test + state.num
    },
    test () {
      return 'test数量'
    }
  },
  modules: {}
})
